<template>
  <view class="notice-detail-page">
    <!-- 公告标题 -->
    <view class="notice-title">{{ notice.name }}</view>
    <!-- 公告图片 -->
    <image :src="'http://localhost:1337'+ notice.coverImage" mode="aspectFit" class="notice-image"></image>
    <!-- 公告描述 -->
    <view class="notice-description">{{ notice.desc }}</view>
    <!-- 公告内容 -->
    <view v-html="notice.content" class="notice-content"></view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { noticeDetail } from '../../api/notice.js';
import { ref } from 'vue';

// 定义响应式数据存储公告详情
const notice = ref({});

onLoad((option) => {
  console.log(option.id);
  // 调用获取详情的函数
  getDetail(option.id);
});

// 异步获取公告详情的函数
async function getDetail(id) {
    const r1 = await noticeDetail(id);
    console.log(r1.data);
    // 将获取到的公告详情数据赋值给 notice
    notice.value = r1.data.data;
}
</script>

<style scoped>
.notice-detail-page {
  padding: 20px;
}

.notice-title {
	text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.notice-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.notice-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.notice-content {
  font-size: 14px;
  color: #333;
}
</style>